<template>
    <section class="w-full">
        <p class="page-title">{{this.$route.name}}</p>
        <el-row class="w-full h-full">
            <el-col :span="8" class="b-r h-full">
                <el-form style="max-width: 350px;margin-right: 20px" :model="orgForm" label-position="left">
                    <el-button type="primary" icon="el-icon-plus" @click="addOrg()" size="small">新增顶级机构</el-button>
                    <el-form-item label="机构名称">
                        <el-input autocomplete="off" v-model="orgForm.orgName"></el-input>
                    </el-form-item>
                    <el-form-item label="机构负责人">
                        <el-input  autocomplete="off" v-model="orgForm.leader"></el-input>
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input  autocomplete="off" type="textarea" v-model="orgForm.remark"></el-input>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="15" :offset="1" style="padding: 20px">
                <div class="custom-tree-container">
                    <div class="block">
                    <h2>
                        机构总览
                        <el-button icon="el-icon-refresh" @click="queryOrgs()" size="small" circle></el-button>
                    </h2>
                    <el-tree :data="orgData" node-key="id"
                             :props="defaultProps" ref="tree" @node-click="clickTree" :expand-on-click-node="false">
                        <span style="flex: 1;display: flex;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 8px" slot-scope="{ node }" @mouseenter="mouseenter(node)" @mouseleave="mouseleave(node)">
                            <span>{{ node.label }}</span>
                            <span>
                            <el-button v-show="node.show"
                                  type="text"
                                  size="mini"
                                  :disabled="node.level>=3"
                                  @click.stop="() => addOrgChild(node)">
                            新增下级机构
                            </el-button>
                            <el-button v-show="node.show"
                                  type="text"
                                  size="mini"
                                  @click.stop="() => editOrg(node)">
                            编辑机构
                            </el-button>
                            <el-button v-show="node.show"
                                    type="text"
                                    size="mini"
                                    @click.stop="() => deleteOrg(node)">
                            删除机构
                            </el-button>
                            </span>
                        </span>
                    </el-tree>
                </div>
                </div>
            </el-col>
        </el-row>
        <el-dialog :title="orgDiaTitle" :visible.sync="showOrgDialog" :close-on-click-modal=false @close="closeOrgDialog" width="40%">
            <el-form :model="orgForm" status-icon ref="orgForm" label-width="100px" class="demo-dynamic" :rules="rules" >
                <el-form-item label="机构名称" :label-width="formLabelWidth" prop="orgName">
                    <el-input v-model="orgForm.orgName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="负责人" :label-width="formLabelWidth" prop="leader">
                    <el-input v-model="orgForm.leader" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="描述" :label-width="formLabelWidth" prop="remark">
                    <el-input v-model="orgForm.remark" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeOrgDialog">取 消</el-button>
                <el-button type="primary" @click="submitOrgForm('orgForm')" :loading="orgFormLoading">保 存</el-button>
            </div>
        </el-dialog>
    </section>
</template>


<script>

    export default {
        name: "routerManager",
        data() {
            return {
                orgData: [

                ],
                orgForm: {
                    orgName: '',
                    leader: '',
                    remark: '',
                    parentId: '',
                },
                showOrgDialog: false,
                formLabelWidth: '80px',
                requestMethod: 'post',
                orgDiaTitle: '新增顶级机构',
                orgFormLoading: false,
                rules: {
                    orgName: [
                        {
                            required: true,
                            message: '请输入机构名称',
                            trigger: 'blur'
                        }
                    ],
                },
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
            }
        },
        created() {
            this.queryOrgs();
        },
        methods: {
            queryOrgs() {
                this.$http({
                    url: '/org/orgs',
                    method: 'get',
                    params: {}
                })
                .then((response) => {
                    this.orgData = response;
                })
            },
            addOrg() {
                this.orgDiaTitle= '新增顶级机构';
                this.orgForm.orgName = '';
                this.orgForm.leader = '';
                this.orgForm.remark = '';
                this.orgForm.parentId = '';
                this.showOrgDialog = true;
                this.requestMethod = 'post';
            },
            editOrg(node) {
                this.orgForm.orgName = node.data.orgName;
                this.orgForm.leader = node.data.leader;
                this.orgForm.remark = node.data.remark;
                this.orgForm.parentId = node.parent.key;
                this.orgDiaTitle = '编辑 ['+node.label+'] 机构';
                this.requestMethod = 'put';
                this.showOrgDialog = true;
            },
            getOrgInfo(orgId) {
                this.$http({
                    url: '/org/org/'+orgId,
                    method: 'get',
                    params: {}
                }).then((response) => {
                    this.orgForm.orgName = response.orgName;
                    this.orgForm.leader = response.leader;
                    this.orgForm.remark = response.remark;
                })
            },
            addOrgChild(node) {
                this.orgForm.orgName = '';
                this.orgForm.leader = '';
                this.orgForm.remark = '';
                this.orgForm.parentId = node.key;
                this.orgDiaTitle = '新增 ['+node.label+'] 的下级机构';
                this.requestMethod = 'post';
                this.showOrgDialog = true;
            },
            deleteOrg(node) {
                let orgId = node.key;
                this.$confirm('将删除机构'+node.label+', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url: '/org/org/'+orgId,
                        method: 'delete',
                        params: {}
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.queryOrgs();
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            addOrEditOrg() {
                this.orgFormLoading = true;
                this.$http({
                    url: '/org/org',
                    method: this.requestMethod,
                    data: this.$qs.stringify(this.orgForm)
                })
                .then(() => {
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                    this.showOrgDialog = false;
                    this.queryOrgs();
                    this.orgFormLoading = false;
                }).catch(()=> {
                    this.orgFormLoading = false;
                })
            },
            submitOrgForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.addOrEditOrg();
                    } else {
                        return false;
                    }
                });
            },
            clickTree(data) {
                this.getOrgInfo(data.id);
            },
            mouseenter(node){
                this.$set(node, 'show', true)
            },
            mouseleave(node){
                this.$set(node, 'show', false)
            },
            closeOrgDialog() {
                this.showOrgDialog = false;
                this.$refs['orgForm'].resetFields();
            }
        }
    }
</script>


<style lang="stylus" scoped >


</style>